<template>
	<view class="m30">
		<view>
			<u-tabs :list="tabList" lineWidth="32" lineHeight="4" :scrollable="false"
				lineColor="linear-gradient(170deg, #FFA5F5, #319EFF)" :inactiveStyle="{'color':'#999'}"
				:activeStyle="{'color':'#34314F','fontWeight':'bold'}" @click="tabClick" :current="current"></u-tabs>
		</view>
		<u-gap height="20"></u-gap>
		<view v-if="listData.length > 0">
			<view v-for="(item,index) in listData" :key="item.id" class="p_item pore bgFff p30">
				<view class="flex" :class="{'flex-start':item.userId}">
					<u-image :src="api_host + item.userAvatar" shape="circle" width="60" height="60"
						@click="item.userId?openUrl('/subpage/meethuangshi/userInfo?id='+item.id+'&uid='+item.userId):openUrl('/subpage/meethuangshi/orgInfo?id='+item.id+'&code='+item.inviteCode)"></u-image>
					<view class="ml20 flex-jus flex1">
						<view class="mr10"
							@click="item.userId?openUrl('/subpage/meethuangshi/userInfo?id='+item.id+'&uid='+item.userId):openUrl('/subpage/meethuangshi/orgInfo?id='+item.id+'&code='+item.inviteCode)">
							<view class="flex">
								<text class="f28 bold mr20 c343">{{item.userName}}</text>
								<image v-if="item.sex"
									:src="'https://hxs.dsjhs.com:553/prod-api/profile/yujian/' + item.sex +'.png'"
									mode="" style="width: 30rpx;height: 30rpx;"></image>
							</view>
							<u-gap height="5" v-if="item.userId"></u-gap>
							<view class="flex f24 c343">
								<text v-if="item.year">{{item.year}}岁</text>
								<text v-if="item.height" class="ml10">{{item.height}}cm</text>
								<text v-if="item.weight" class="ml20">{{item.weight}}kg</text>
								<text v-if="item.edu" class="ml20">{{item.edu}}</text>
							</view>
							<u-gap height="5" v-if="item.userId"></u-gap>
							<view class="flex">
								<view class="flex" v-if="item.idCert === 2">
									<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/sm.png" mode=""
										style="width: 30rpx;height: 30rpx;"></image>
									<text class="f24 c666 ml10">实名</text>
								</view>
								<view class="flex ml20" v-if="item.jobCert === 2">
									<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/gz.png" mode=""
										style="width: 30rpx;height: 30rpx;"></image>
									<text class="f24 c666 ml10">工作</text>
								</view>
							</view>
							<u-gap height="5" v-if="item.userId"></u-gap>
							<view class="flex flex-wrap" v-if="item.userTags">
								<view v-for="(tag,i) in item.userTags.split(',')" :key="tag" class="mr10 mb10">
									<u-tag :text="tag" shape="circle" size="mini" borderColor="#f7f7f7"
										bgColor="#f7f7f7" color="#333"></u-tag>
								</view>
							</view>
						</view>
						<view class="mr10">
							<view v-if="item.status == 0" class="mb10"
								@click.stop="item.userId?openUrl('/subpage/meethuangshi/userInfo?id='+item.id+'&uid='+item.userId+'&type=exam'):openUrl('/subpage/meethuangshi/orgInfo?id='+item.id+'&code='+item.inviteCode+'&type=exam')">
								<u-button type="success" shape="circle" color="#EAF5FF"
									:customStyle="{'width':'120%','color':'#319EFF','height':'60rpx'}">待审核</u-button>
							</view>
							<view v-if="item.userId"
								@click.stop="openUrl(`/subpage/meethuangshi/chat?id=${item.userId}&nickName=${item.userName}&userAvatar=${item.userAvatar}&type=${item.chatType}`)">
								<u-button type="success" shape="circle"
									color="linear-gradient(130deg, #FFA5F5, #319EFF)"
									:customStyle="{'width':'120%'}">私信沟通</u-button>
							</view>
						</view>
					</view>
				</view>
				<view class="status-img" v-if="item.status != 0">
					<image :src="'https://hxs.dsjhs.com:553/prod-api/profile/yujian/sh_' +  item.status + '.png'"
						mode="heightFix"></image>
				</view>
			</view>
		</view>
		<u-empty v-else mode="data" text="暂无申请成员" marginTop="100">
		</u-empty>
	</view>
</template>

<script>
	import {
		getActUsers
	} from '@/common/api_meethuangshi.js'
	export default {
		name: '',
		data() {
			return {
				id: '',
				current: 0,
				chatTypes:{
					0:'pending',
					1:'success',
					2:''
				},
				tabList: [{
						name: '已审核',
						value: 1
					},
					{
						name: '未审核',
						value: 0
					}
				],
				listData: [],
			}
		},
		onLoad(option) {
			this.id = option.id;
		},
		onShow() {
			if (this.id) {
				this.getActUsers()
			}
		},
		methods: {
			async getActUsers() {
				uni.showLoading({
					mask: true
				})
				const res = await getActUsers({
					id: this.id,
					status: this.tabList[this.current].value
				})
				if (res.code == 200) {
					this.listData = res.rows.map(item =>{
						return {
							...item,
							chatType:this.chatTypes[item.status]
						}
					});
					uni.hideLoading()
				}
				console.log(this.listData);
			},
			tabClick(item) {
				this.current = item.index;
				this.getActUsers()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FF;
	}

	.p_item {
		border-radius: 100rpx 50rpx 50rpx 50rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.status-img {
		position: absolute;
		right: 0;
		top: 0;

		image {
			height: 60rpx;
		}
	}
</style>